<template>
  <div style="width: 100%;">
    <div class="chart" id="chartDemo">
    </div>
  </div>
</template>

<script>
import {inject, onMounted} from "vue"
import request from "@/utils/request";
export default {
  setup(){
    let $echarts = inject("echarts");
    let $http = inject("axios")
    let data = null;
    let xdata = null;
    async function getData() {
      await request.post("/api/efficiency/getData").then(res=>{
        data = res.data;
      })
      await request.post("/api/efficiency/getxAxis").then(res=>{
        xdata = res.data;
      })
    }
    onMounted( ()=>{
      let rememberChar = $echarts.init(document.getElementById("chartDemo"))
      getData().then(()=>{
        rememberChar.setOption({
          title: {
            text: '记忆单词效率统计'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          // legend: {
          //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
          // },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: xdata
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Efficiency',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: data
            },
          ]
        },'dark')
      })
    })
    return {
      getData,data,xdata
    }
  },

}
</script>

<style scoped>
.chart{
  height: 90%;
  width: 90%;
  /*border: 1px red solid;*/
}
</style>
